<template>
  <div class="insert-title">
    <div class="insert-top">{{ insertOrEdit }}</div>
    <el-select
      placeholder="请选择栏目"
      :disabled="tabValue === 'dev' && insertOrEdit === '编辑'"
      v-model="tabValue"
    >
      <el-option
        v-for="item in selectValue.data"
        :disabled="item.value !== 'dev'"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input placeholder="请输入标题" v-model="title"></el-input>
    <el-input
      v-model="accessToken"
      :disabled="tokenDisable"
      placeholder="请输入accesstoken"
    ></el-input>
    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="content"> </el-input>
    <div class="next">
      <el-button type="success" @click="nextStep">下一步</el-button>
    </div>

    <el-dialog title="温馨提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <span>是否已经确认填写内容？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { handleTheme } from '@/modules/cnode/handleTheme'
export default {
  data() {
    return {
      value: '',
    }
  },
  setup(props) {
    const {
      selectValue,
      insertOrEdit,
      tokenDisable,
      title,
      content,
      tabValue,
      accessToken,
      centerDialogVisible,
      dialogVisible,
      nextStep,
      submit,
    } = handleTheme()
    function handleClose(){
      console.log(123);
    }
    return {
      selectValue,
      insertOrEdit,
      tokenDisable,
      title,
      content,
      tabValue,
      accessToken,
      centerDialogVisible,
      dialogVisible,
      nextStep,
      submit,
      handleClose
    }
  },
}
</script>

<style lang="scss" scoped>
.insert-title {
  padding: 30px;
  width: 40vw;
  margin: 20px auto;
  background: rgb(228, 228, 228);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 10px 10px 3px 0px rgb(202, 200, 200);
  .insert-top {
    padding: 5px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background-color: rgb(240, 119, 125);
    box-shadow: 2px 5px 3px 1px rgb(202, 200, 200);
    margin: -30px -30px 30px;
    border-bottom-left-radius: 105px;
    border-bottom-right-radius: 105px;
  }
  .el-select--medium {
    width: 300px !important;
  }
  .el-input {
    margin: 20px 0;
    width: 300px !important;
  }
  .next {
    margin-top: 30px;
    margin-right: 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
